import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ball_lion/module/mine/help/feedback_logic.dart';
import 'package:ball_lion/resources/colours.dart';
import 'package:ball_lion/utils/utils.dart';
import 'package:ball_lion/widgets/base/wqs_text.dart';
import 'package:ball_lion/widgets/base/wqs_button.dart';
import 'package:ball_lion/widgets/ball_appbar.dart';
import 'package:ball_lion/widgets/card.dart';
import 'package:ball_lion/widgets/picture_preview_widget.dart';
import 'package:ball_lion/widgets/select_bottomsheet.dart';

class FeedbackPage extends StatefulWidget {
  const FeedbackPage({super.key});

  @override
  State<FeedbackPage> createState() => _FeedbackPageState();
}

class _FeedbackPageState extends State<FeedbackPage> {
  final FeedbackLogic logic = Get.put(FeedbackLogic());

  @override
  Widget build(BuildContext context) {
    return GetBuilder<FeedbackLogic>(builder: (logic) {
      return Scaffold(
          backgroundColor: Colours.greyF2F3F7,
          appBar: const BallAppBar(title: "反馈问题"),
          body: SizedBox(
            height: Get.height,
            child: Column(
              children: [
                Expanded(
                  child: SingleChildScrollView(
                    child:
                        Column(children: [description(), images(), weChat()]),
                  ),
                ),
                Container(
                  width: Get.width,
                  padding:
                      const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
                  color: Colours.white,
                  child: QsButton(
                    enable: logic.str.length > 10,
                    onPressed: logic.sendFeedback,
                    text: "提交",
                    borderRadius: 8,
                    backgroundColor: Colours.main,
                    foregroundColor: Colours.white,
                  ),
                )
              ],
            ),
          ));
    });
  }

  Widget description() {
    return itemForm(
      title: "问题描述",
      child: Padding(
        padding: const EdgeInsets.only(top: 8),
        child: TextField(
          maxLines: null,
          decoration: const InputDecoration(
            filled: true,
            fillColor: Colours.greyF2F3F7,
            contentPadding: EdgeInsets.all(8),
            border: OutlineInputBorder(
              borderSide: BorderSide.none,
              borderRadius: BorderRadius.all(Radius.circular(8)),
            ),
            hintText: "请填写10个字以上的问题描述，以便我们提供更好的服务\n\n",
            hintMaxLines: 5,
            hintStyle: TextStyle(fontSize: 14, color: Colours.grey99),
          ),
          style: const TextStyle(fontSize: 14),
          strutStyle: const StrutStyle(fontSize: 16),
          cursorColor: Colours.main,
          onChanged: (str) {
            logic.str = str;
          },
        ),
      ),
    );
  }

  Widget images() {
    return itemForm(
        title: "上传凭证（问题截图）",
        child: GridView.builder(
          itemCount: logic.uploadImages.length + 1 > 6
              ? 6
              : logic.uploadImages.length + 1,
          padding: const EdgeInsets.only(top: 12),
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, crossAxisSpacing: 6, mainAxisSpacing: 6),
          itemBuilder: (context, index) {
            if (index == logic.uploadImages.length) {
              return GestureDetector(
                onTap: () async {
                  FocusScope.of(context).requestFocus(FocusNode());
                  final result = await Get.bottomSheet(
                      const SelectBottomSheet(['拍照', '从手机相册选择']));
                  if (result == 0) {
                    logic.addPhotoFromCamera(3);
                  } else if (result == 1) {
                    logic.addPhotoFromGallery(3);
                  }
                },
                child: Image.asset(Utils.getImgPath('add_photo2.png')),
              );
            } else {
              return GestureDetector(
                onTap: () async {
                  Get.dialog(
                      PicturePreview(imageUrl: logic.uploadImages[index]),
                      useSafeArea: false);
                },
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(4),
                  child: Stack(
                    fit: StackFit.expand,
                    children: [
                      CachedNetworkImage(
                        imageUrl: logic.uploadImages[index],
                        fit: BoxFit.cover,
                      ),
                      Positioned(
                          top: 0,
                          right: 0,
                          child: GestureDetector(
                            onTap: () => logic.onDeleteImage(index),
                            child: Container(
                              width: 22,
                              height: 22,
                              color: Colours.blackColor,
                              child: const Icon(
                                Icons.close,
                                color: Colours.white,
                                size: 14,
                              ),
                            ),
                          ))
                    ],
                  ),
                ),
              );
            }
          },
        ));
  }

  Widget weChat() {
    return itemForm(
        title: "联系微信",
        axis: Axis.horizontal,
        child: Expanded(
          child: SizedBox(
            height: 20,
            child: TextField(
              textAlign: TextAlign.end,
              maxLines: 1,
              decoration: const InputDecoration(
                contentPadding: EdgeInsets.only(left: 8),
                border: OutlineInputBorder(
                  borderSide: BorderSide.none,
                  borderRadius: BorderRadius.all(Radius.circular(8)),
                ),
                hintText: "请输入正确的微信号，以便与您联系",
                hintStyle: TextStyle(fontSize: 14, color: Colours.grey99),
              ),
              style: const TextStyle(fontSize: 14),
              strutStyle: const StrutStyle(fontSize: 16),
              cursorColor: Colours.main,
              onChanged: (str) {
                logic.number = str;
              },
            ),
          ),
        ));
  }

  Widget itemForm(
      {required Widget child,
      required String title,
      Axis axis = Axis.vertical}) {
    return Block(
        cardStyle: const CardStyle(
          margin: EdgeInsets.fromLTRB(8, 8, 8, 0),
          padding: EdgeInsets.symmetric(horizontal: 12, vertical: 16),
        ),
        child: axis == Axis.vertical
            ? Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [QsText(title, fontSize: 16), child],
              )
            : Row(
                children: [QsText(title, fontSize: 16), child],
              ));
  }
}
